<template>
	<!-- 新增出料 -->
	<view class="container">
		<topBar isFixed>新增出料</topBar>
		<scroll-view scroll-y class="content">
			<view class="cart-imgs">
				<view class="left">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>车辆照片</text>
					</view>
					<view class="upload-area">
						<view class="upload-box" @click="uploadCartImg">
							<view class="upload">
								<image src="/static/img/common/camera.png" class="icon"></image>
								<text>拍照上传</text>
							</view>
							<view class="upload-tip">
								最多上传1张
							</view>
						</view>
						<view class="show-img" v-if="dischargingInfo.carImages[0]">
							<view class="imgs">
								<view class="img-box">
									<image :src="dischargingInfo.carImages[0]" mode="widthFix" class="img"></image>
									<up-icon class="icon" @click="delImg('carImages',0)" name="trash-fill"
										color="#EB4F51" size="30"></up-icon>
								</view>
							</view>
							<!-- <view class="img-title">
									物料照片01.jpg
								</view> -->
						</view>
					</view>
				</view>
				<view class="upload-example">
					<image src="/static/img/consumption/upload-example.png" class="img"></image>
					<view class="example-tip">
						上传示例
					</view>
				</view>
			</view>
			<view class="cart-info">
				<view class="cart-types">
					<Button2 class="btn" v-if="cartInfo.plateNoType">{{cartInfo.plateNoType}}</Button2>
					<Button2 class="btn" v-if="cartInfo.directory">{{cartInfo.directory==0?'非名录车':'名录车'}}
					</Button2>
				</view>
				<CarPlateInput :plateNumber="plateNumber" @PlateChange="handleNumChange" />
				<view class="cart-type">
					新能源
				</view>
			</view>
			<view class="cart-lines">
				<view class="line">
					<view class="title">
						运企名称
					</view>
					<view class="val">
						{{dischargingInfo.transportCompanyName}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						起点名称
					</view>
					<view class="val">
						{{dischargingInfo.startingPlace}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						起点厂区
					</view>
					<view class="val">
						{{nowstartingFieldArea}}
					</view>
				</view>
				<view class="line">
					<view class="left">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>起点场所</text>
					</view>
					<view class="right">
						<block v-if="startVenueList.length">
							<Button1 v-for="item in startVenueList" :key="item.id"
								:class="item.label !== dischargingInfo.startingArea && 'no-active-btn'"
								@click="changeVenue1(item)">
								{{item.label}}
							</Button1>
						</block>
						<view class="val" v-else>
							{{dischargingInfo.startingArea}}
						</view>
					</view>
				</view>
				<view class="line">
					<view class="left">
					</view>

					<view class="right">
						<Button1 v-for="item in nowOrderTypeList" :key="item.id"
							:class="item.id != dischargingInfo.orderEnd && 'no-active-btn'"
							@click="changeOrderType(item.id)">{{item.name}}</Button1>
					</view>
				</view>
				<!-- 订单为销售显示终点名称 -->
				<view class="line" @click="showStartProjectPopup" v-if="dischargingInfo.orderEnd == '3'">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>终点名称</text>
					</view>
					<view class="val" :class="dischargingInfo.terminusPlace=='' &&'no-check'">
						<text>{{dischargingInfo.terminusPlace || '请选择' }}</text>
						<uni-icons type="right" size="28"
							:color="dischargingInfo.terminusPlace=='' ? '#989DA5' : '#0E1624'"></uni-icons>
					</view>
				</view>
				<block v-else>
					<!-- 起点厂区为原料区 默认为生产区 -->
					<view class="line" v-if="dischargingInfo.startingFieldArea =='4'">
						<view class="title">
							终点厂区
						</view>
						<view class="val">
							{{nowTerminusFieldArea}}
						</view>
					</view>
					<!-- 内转就是终点厂区---可选 -->
					<view class="line" v-else @click="showStartProjectPopup2">
						<view class="title">
							<image src="/static/img/common/required.png" class="required-icon"></image>
							<text>终点厂区</text>
						</view>
						<view class="val" :class="nowTerminusFieldArea =='' &&'no-check'">
							<text>{{nowTerminusFieldArea || '请选择' }}</text>
							<uni-icons type="right" size="28"
								:color="nowTerminusFieldArea =='' ? '#989DA5' : '#0E1624'"></uni-icons>
						</view>
					</view>
					<view class="line" v-if="isShowTerminusArea">
						<view class="left">
							<image src="/static/img/common/required.png" class="required-icon"></image>
							<text>终点场所</text>
						</view>
						<view class="right">
							<block v-if="endVenueList.length">
								<Button1 v-for="item in endVenueList" :key="item.id"
									:class="item.label !== dischargingInfo.terminusArea && 'no-active-btn'"
									@click="changeVenue2(item)">
									{{item.label}}
								</Button1>
							</block>
							<view class="val" v-else>
								{{dischargingInfo.terminusArea}}
							</view>
						</view>
					</view>
				</block>
				<view class="line">
					<view class="left">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>驾驶员</text>
					</view>
					<view class="val">
						<input type="text" class="amount-input" placeholder="请输入"
							v-model="dischargingInfo.driverName" />
					</view>
				</view>
				<view class="line" @click="showMaterialTypePopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>物料类型</text>
					</view>
					<view class="val" :class="dischargingInfo.rockName == '' &&'no-check'">
						<text>{{dischargingInfo.rockName || '请选择'}}</text>
						<uni-icons type="right" size="28"
							:color="dischargingInfo.rockName == ''?'#989DA5':'#0E1624'"></uni-icons>
					</view>
				</view>
				<view class="cart-imgs line ">
					<view class="left">
						<view class="title">
							物料照片
						</view>
						<view class="upload-area">
							<view class="upload-box" @click="uploadMaterialImg('rockImages')">
								<view class="upload">
									<image src="/static/img/common/camera.png" class="icon"></image>
									<text>拍照上传</text>
								</view>
								<view class="upload-tip">
									最多上传6张
								</view>
							</view>
							<view class="show-img" v-if="dischargingInfo.rockImages.length">
								<view class="imgs">
									<view class="img-box" v-if="dischargingInfo.rockImages[0]">
										<image :src="dischargingInfo.rockImages[0]" mode="widthFix" class="img"></image>
										<up-icon class="icon" @click="delImg('rockImages',0)" name="trash-fill"
											color="#EB4F51" size="30"></up-icon>
									</view>
									<view class="img-box" v-if="dischargingInfo.rockImages[1]">
										<image :src="dischargingInfo.rockImages[1]" mode="widthFix" class="img"></image>
										<up-icon class="icon" @click="delImg('rockImages',1)" name="trash-fill"
											color="#EB4F51" size="30"></up-icon>
									</view>

								</view>
								<view class="moreImg" @click="showMoreImgs(dischargingInfo.rockImages)">
									点击查看更多
								</view>
							</view>
						</view>
					</view>
				</view>
				<block v-if="dischargingInfo.startingFieldArea == '6'">
					<view class="line">
						<view class="title">
							<image src="/static/img/common/required.png" class="required-icon"></image>
							<text>实际装载</text>
						</view>
						<view class="val">
							<input type="number" class="amount-input" v-model="dischargingInfo.actualLoad" />吨
						</view>
					</view>
					<view class="cart-imgs line ">
						<view class="left">
							<view class="title">
								地磅照片
							</view>
							<view class="upload-area">
								<view class="upload-box" @click="uploadMaterialImg('weighbridgeImages')">
									<view class="upload">
										<image src="/static/img/common/camera.png" class="icon"></image>
										<text>拍照上传</text>
									</view>
									<view class="upload-tip">
										最多上传6张
									</view>
								</view>
								<view class="show-img" v-if="dischargingInfo.weighbridgeImages.length">

									<view class="imgs">
										<view class="img-box" v-if="dischargingInfo.weighbridgeImages[0]">
											<image :src="dischargingInfo.weighbridgeImages[0]" mode="widthFix"
												class="img"></image>
											<up-icon class="icon" @click="delImg('weighbridgeImages',0)"
												name="trash-fill" color="#EB4F51" size="30"></up-icon>
										</view>
										<view class="img-box" v-if="dischargingInfo.weighbridgeImages[1]">
											<image :src="dischargingInfo.weighbridgeImages[1]" mode="widthFix"
												class="img"></image>
											<up-icon class="icon" @click="delImg('weighbridgeImages',1)"
												name="trash-fill" color="#EB4F51" size="30"></up-icon>
										</view>
									</view>
									<view class="moreImg" @click="showMoreImgs(dischargingInfo.weighbridgeImages)">
										点击查看更多
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="line">
						<view class="title">
							<image src="/static/img/common/required.png" class="required-icon"></image>
							<text>是否满载</text>
						</view>
						<view class="val">
							<Button1 v-for="item in fullFlagList"
								:class="item.id != dischargingInfo.fullFlag && 'no-active-btn'" :key="item.id"
								@click="changeFullFlag(item.id)">
								{{item.name}}
							</Button1>
						</view>
					</view>
					<view class="line" v-if="dischargingInfo.fullFlag == 0">
						<view class="title">
							<image src="/static/img/common/required.png" class="required-icon"></image>
							<text>扣方方量</text>
						</view>
						<view class="val deduction-amount">
							-
							<input class="amount-input" type="number" v-model="dischargingInfo.volumeReduce" />
							方
						</view>
					</view>
				</block>

			</view>
		</scroll-view>
		<!-- 终点名称弹窗 -->
		<StartProjectPopup v-if="isShowStartProjectPopup" isEnd :now-addr="nowAddr" :address-list="addressList"
			@saveStartProject="saveStartProject" />
		<!-- 终点厂区弹窗 -->
		<StartProjectPopup2 v-if="isShowStartProjectPopup2" isEnd :now-project-id="dischargingInfo.terminusFieldArea"
			@saveStartProject="saveStartProject2" />
		<!-- 物料类型弹窗 -->
		<MaterialTypePopup v-if="isShowMaterialTypePopup" :type-list="muckTypeList"
			@saveMaterialType="saveMaterialType" />
		<!-- 预览图片 -->
		<PreviewImgs :img-list="moreImgs" v-if="isShowMoreImgs" @closePreview="closeMoreImgs" />

		<BottomBtn @click="saveReceiving">提交确认</BottomBtn>
		<!-- 提示弹窗 -->
		<messageTip ref="myMessage" />

	</view>

</template>

<script setup lang="ts">
	import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import Button1 from '@/components/button1/button1.vue';
	import Button2 from '@/components/button2/button2.vue';
	import StartProjectPopup from '@/components/consumption/startProjectPopup/startProjectPopup.vue';
	import StartProjectPopup2 from '@/components/consumption/startProjectPopup2/startProjectPopup2.vue';
	import MaterialTypePopup from '@/components/consumption/materialTypePopup/materialTypePopup.vue';
	import CarPlateInput from '@/components/carPlateInput/carPlateInput.vue';
	import PreviewImgs from '@/components/previewImgs/previewImgs.vue';
	import { computed, reactive, ref } from 'vue';
	import * as consumptionApi from '@/api/consumption/consumption.js';
	import * as dischargingApi from '@/api/consumption/discharging.js';

	import { useConsumptionStore, useUserStore } from '@/stroes';
	// 消息提示
	const myMessage = ref()
	// 仓库
	const consumptionStore = useConsumptionStore()
	const userStore = useUserStore()
	// 起点信息
	const venueInfo = consumptionStore.nowVenue
	// 车辆信息
	const cartInfo = ref({})
	// console.log('车辆信息', cartInfo.value);
	// 收料信息
	const dischargingInfo = reactive({
		// 出料类型：1--出料  2--收料
		orderType: '2',
		// 车辆照片--数量1
		carImages: [],
		// 车牌照
		carNumber: "",
		// 运企名称Id
		transportCompanyId: '',
		// 运企名称
		transportCompanyName: '',
		// 起点名称id
		startingId: venueInfo.id,
		// 起点名称
		startingPlace: venueInfo.terminalPointName,
		// 起点名称地址
		startingAddress: venueInfo.terminalPointAddress,
		// 起点名称经度
		startingLongitude: venueInfo.longitude,
		// 起点名称纬度
		startingLatitude: venueInfo.latitude,
		// 起点厂区---4 原料厂  5 生产区 6 成品区
		startingFieldArea: userStore.fieldArea,
		// 起点场所
		startingArea: '',
		// 起点类型
		startingType: '',
		//订单走向--- 2 内转 3 销售
		orderEnd: userStore.fieldArea === '6' ? '3' : '2',
		// 终点厂区---4 原料厂  5 生产区 6 成品区
		terminusFieldArea: '',
		// 终点场所 
		terminusArea: '',
		// 终点名称Id
		terminusId: null,
		// 终点名称
		terminusPlace: "",
		// 终点名称地址
		terminusAddress: "",
		// 终点名称经度
		terminusLongitude: "",
		// 终点名称纬度
		terminusLatitude: "",
		// 司机名
		driverName: "",
		// 物料类型Id
		rockType: 0,
		// 物料类型名称
		rockName: "",
		// 物料照片--数量6
		rockImages: [],
		// 是否满载 0未满载 1已满载
		fullFlag: "1",
		// 预估方量
		volume: null,
		// 实际装载
		actualLoad: null,
		// 扣方原因
		reduceReason: "",
		// 扣方方量
		volumeReduce: null,
		// 地磅照片
		weighbridgeImages: [],
		// 内转车:String 0--非内转 1--内转车
		internal: "",
		// 名录车:String 0--名录车 1--非名录车
		directory: ""
	})
	// 当前起点厂区
	const nowstartingFieldArea = computed(() => {
		let text = '';
		switch (dischargingInfo.startingFieldArea) {
			case '4':
				text = '原料区';
				dischargingInfo.terminusFieldArea = '5'
				break;
			case '5':
				text = '生产区';
				dischargingInfo.terminusFieldArea = '4'
				break;
			case '6':
				text = '成品区';
				break;
		}
		return text
	})
	// 获取当前终点厂区
	const nowTerminusFieldArea = computed(() => {
		let text = '';
		switch (dischargingInfo.terminusFieldArea) {
			case '4':
				text = '原料区';
				break;
			case '5':
				text = '生产区';
				break;
			case '6':
				text = '成品区';
				break;
		}
		return text
	})
	// 所有场所列表
	const allVenueList = ref([])
	// 是否显示终点场所
	const isShowTerminusArea = ref(dischargingInfo.terminusFieldArea == '')
	// 起点场所列表
	const startVenueList = computed(() => {
		let data = allVenueList.value.find(item => item.label == nowstartingFieldArea.value)
		console.log('起点场所列表', data, allVenueList, nowstartingFieldArea);
		let arr = data ? data.children : [];
		if (arr.length) {
			dischargingInfo.startingArea = data.children[0].label
		} else {
			dischargingInfo.startingArea = ''
		}
		return arr
	})
	// 终点场所列表
	const endVenueList = computed(() => {
		let data = allVenueList.value.find(item => item.label == nowTerminusFieldArea.value)
		let arr = data ? data.children : [];
		if (arr.length) {
			dischargingInfo.terminusArea = data.children[0].label
		} else {
			dischargingInfo.terminusArea = ''
		}
		return arr
	})
	// 修改起点场所
	const changeVenue1 = (item) => {
		dischargingInfo.startingArea = item.label
	}
	// 修改终点场所
	const changeVenue2 = (item) => {
		dischargingInfo.terminusArea = item.label
	}
	// 根据起点名称获取所有场所
	dischargingApi.getDischargingAddr({ label: venueInfo.terminalPointName }).then(res => {
		if (res.data.code == 0) {
			allVenueList.value = res.data.data
		}
	})

	// 车辆号码
	const plateNumber = ref(['', '', '', '', '', '', '', ''])
	// 修改车辆号码
	const handleNumChange = (val : string[]) => {
		plateNumber.value = val
		dischargingInfo.carNumber = val.join('')
		if (val.length >= 7) {
			getCarInfoData(dischargingInfo.carNumber)
		}
	}
	// 根据车牌号获取车辆信息
	const getCarInfoData = (cartId : string) => {
		dischargingApi.getCartInfo({ cartId }).then(res => {
			if (res.data.code == 0) {
				// console.log('车辆识别信息', res.data);
				cartInfo.value = res.data.data
				dischargingInfo.transportCompanyId = res.data.data.vehicleInfo?.companyId
				dischargingInfo.transportCompanyName = res.data.data.vehicleInfo?.companyName
				dischargingInfo.internal = res.data.data.internal
				dischargingInfo.directory = res.data.data.directory

			} else {
				myMessage.value.open('error', res.data.msg)
			}
		})
	}

	// 收料订单类型列表
	const orderTypeList = [{ name: '内转', id: '2' }, { name: '销售', id: '3' }]
	// 当前订单类型列表
	const nowOrderTypeList = computed(() => {
		let arr = []
		switch (dischargingInfo.startingFieldArea) {
			case '4':
				dischargingInfo.orderEnd = '2'
				arr = orderTypeList
				break;
			case '5':
				dischargingInfo.orderEnd = '2'
				arr = [{ name: '内转', id: '2' }]
				break;
			case '6':
				dischargingInfo.orderEnd = '3'
				arr = [{ name: '销售', id: '3' }]
				break;
		}
		return arr
	})
	// 修改收料类型
	const changeOrderType = (id) => {
		dischargingInfo.orderEnd = id
		if (id == 3) {
			isShowTerminusArea.value = false
		} else {
			isShowTerminusArea.value = true
		}
	}

	// 上传车辆照片
	const uploadCartImg = () => {
		uni.chooseImage({
			count: 1,
			success: async (res) => {
				uni.showLoading({
					title: '正在识别中'
				})
				let res2 = await consumptionApi.uploadCartImg({ file: res.tempFilePaths })
				uni.hideLoading()
				// console.log(res2, 'yyyyyyyyyyyy');
				if (res2.statusCode == 200) {
					let data = JSON.parse(res2.data).data
					dischargingInfo.carNumber = data.IdentifyCarNumber
					dischargingInfo.carImages = [data.ossUrl]
					// console.log(data, '888888888888');
					if (data.IdentifyCarNumber.length) {
						plateNumber.value = data.IdentifyCarNumber.split('')
					}
					getCarInfoData(data.IdentifyCarNumber)
				}

			}
		})
	}
	// 当前终点名称列表
	const addressList = ref([])
	// 是否显示终点项目弹窗
	const isShowStartProjectPopup = ref(false)
	// 当前终点名称
	const nowAddr = ref({})
	// 打开选择终点项目弹窗
	const showStartProjectPopup = () => {
		if (!addressList.value.length) {
			dischargingApi.queryProjectInfoList().then(res => {
				if (res.data.code == 0) {
					addressList.value = res.data.data;
					nowAddr.value = addressList.value[0]
					isShowStartProjectPopup.value = true
				}
			})
		} else {
			isShowStartProjectPopup.value = true
		}
	}
	// 保存终点项目
	const saveStartProject = (item) => {
		if (item) {
			nowAddr.value = item
			dischargingInfo.terminusPlace = item.projectName
			dischargingInfo.terminusId = item.projectId
		}
		isShowStartProjectPopup.value = false
	}

	// 是否显示终点厂区弹窗
	const isShowStartProjectPopup2 = ref(false)
	// 打开选择终点厂区弹窗
	const showStartProjectPopup2 = () => {
		isShowStartProjectPopup2.value = true
	}
	// 保存终点厂区
	const saveStartProject2 = (item) => {
		if (item) {
			dischargingInfo.terminusFieldArea = item.projectId
		}
		isShowStartProjectPopup2.value = false
	}

	// 当前物料类型列表
	const muckTypeList = ref([])
	// 是否显示物料类型弹窗
	const isShowMaterialTypePopup = ref(false)
	// 显示物料类型弹窗
	const showMaterialTypePopup = () => {
		consumptionApi.muckTypeAll().then(res => {
			if (res.data.code == 0) {
				muckTypeList.value = res.data.data
			} else {
				console.log("失败")
			}
			isShowMaterialTypePopup.value = true
		})
	}
	// 保存物料类型
	const saveMaterialType = (item) => {
		if (item) {
			dischargingInfo.rockType = item.id
			dischargingInfo.rockName = item.name
		}
		isShowMaterialTypePopup.value = false
	}
	// 上传物料照片
	const uploadMaterialImg = (key) => {
		uni.chooseImage({
			count: 6,
			success: async (res) => {
				uni.showLoading({
					title: '正在上传中'
				})
				for (const file of res.tempFilePaths) {
					let res2 = await consumptionApi.uploadMaterialImg({ file })
					if (res2.data) {
						let data = JSON.parse(res2.data)
						dischargingInfo[key].push(data.data.ossUrl)
					}
				}
				uni.hideLoading()

			}
		})
	}
	// 是否显示更多图片
	const isShowMoreImgs = ref(false)
	// 更多图片列表
	const moreImgs = ref([])
	// 显示查看更多图片
	const showMoreImgs = (imgArr) => {
		moreImgs.value = imgArr
		isShowMoreImgs.value = true
	}
	// 关闭查看更多图片
	const closeMoreImgs = () => {
		isShowMoreImgs.value = false
	}

	// 满载列表
	const fullFlagList = [{ name: '是', id: '1' }, { name: '否', id: '0' },]
	// 修改满载类型
	const changeFullFlag = (id) => {
		if (id == '1') {
			dischargingInfo.volumeReduce = 0
		}
		dischargingInfo.fullFlag = id
	}
	// 开始添加收料
	let startAddReceiving = true
	// 保存新增收料
	const saveReceiving = () => {
		if (startAddReceiving) {
			startAddReceiving = false
			if (dischargingInfo.driverName == '' || dischargingInfo.rockName == '' || dischargingInfo.carNumber == '') {
				startAddReceiving = true
				return myMessage.value.open('error', '请将信息填写完整')
			}

			uni.showLoading({
				title: '正在提交...'
			})
			if (dischargingInfo.orderEnd == '2') {
				dischargingInfo.terminusPlace = '生产区'
				dischargingInfo.terminusLongitude = venueInfo.longitude + ''
				dischargingInfo.terminusLatitude = venueInfo.latitude + ''
			}
			dischargingApi.saveDischarge(dischargingInfo).then(res => {
				// console.log('yyyyyyyyyyyyy', res, dischargingInfo);
				uni.hideLoading()
				if (res.data.code == 0) {
					myMessage.value.open('success', '新增出料成功')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
							success: function () {
								uni.$emit('updata', { msg: "页面刷新" })
							},
							fail: function (err) {
								console.error('页面返回失败：', err);
							}
						});
					}, 1000)
				}

			}).finally(() => {
				startAddReceiving = true
			})
		}
	}
	// 删除图片
	const delImg = (type : string, index : number) => {
		dischargingInfo[type] = dischargingInfo[type].filter((item, ind) => ind !== index)
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 208rpx;
		// padding-bottom: 300rpx;
		box-sizing: border-box;
	}

	.content {
		margin: 0rpx 32rpx;
		width: 686rpx;
		height: 1200rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;
		overflow: hidden;


		.cart-imgs {
			display: flex;
			border-bottom: 2rpx solid rgba(156, 159, 163, 0.1);

			.left {
				flex: 1;
				padding: 32rpx 0rpx 20rpx 24rpx;

				.title {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
				}

				.upload-area {
					display: flex;
					font-size: 20rpx;
					color: $info-color;
					text-align: center;

					.upload-box {
						margin-right: 16rpx;

						.upload {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 10rpx;
							width: 135rpx;
							height: 136rpx;
							font-size: 24rpx;
							color: $primary-color;
							border: 2rpx dashed #9C9FA3;
							border-radius: 8rpx;

							.icon {
								width: 40rpx;
								height: 40rpx;
							}
						}


					}
				}

				.show-img {

					.imgs {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.img-box {
							position: relative;
							margin-right: 20rpx;

							.icon {
								position: absolute;
								right: -20rpx;
								top: -20rpx;
							}

							.img {
								width: 208rpx;
								height: 150rpx;
							}
						}
					}

					.moreImg {
						text-align: left;
						font-size: 30rpx;
						color: $primary-color;
					}
				}
			}

			.upload-example {
				width: 200rpx;
				padding: 70rpx 20rpx 16rpx;
				box-shadow: -4rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				box-sizing: border-box;

				.img {
					width: 160rpx;
					height: 160rpx;
				}

				.example-tip {
					// margin-top: 10rpx;
					font-size: 20rpx;
					color: $primary-color;
					text-align: center;

				}
			}
		}

		.cart-info {
			padding: 18rpx;
			padding-left: 20rpx;

			.cart-types {
				margin-bottom: 18rpx;

				.btn {
					margin-right: 8rpx;
				}
			}

			.cart-type {
				font-size: 24rpx;
				text-align: right;
				color: #55CDA8;
			}
		}

		.cart-lines {
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-top: 2rpx solid rgba(156, 159, 163, .1);
				border-bottom: 0rpx;

				.left {
					padding: 0;
				}

				.title {
					width: 30%;
					display: flex;
					align-items: center;

				}

				.val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// font-weight: bold;

					.amount-input {
						margin: 0rpx 10rpx;
						width: 100rpx;
						font-size: 28rpx;
						// border-bottom: 2rpx solid $default-color;
					}


					&.deduction-amount {
						color: #EB4F51;

						.amount-input {
							width: 50rpx;
							border-bottom: 2rpx solid #EB4F51;
						}
					}

					&.no-check {
						color: #989DA5;
					}
				}

				.btn {
					margin-left: 8rpx;

					&.no-active-btn {
						color: $info-color;
						background: rgba(46, 135, 255, 0.1);
					}
				}

			}
		}

	}
</style>